import G2BaseChart from './G2BaseChart'

const BarChart = ({
  data,
  xField = 'name',
  yField = 'value',
  yField2 = '订单总数',
  color = '#1890FF',
  width = 400,
  smooth = true,
  showArea = false,
}) => {
  const renderChart = (chart) => {
    chart
      .interval()
      .data(data)
      .encode('x', xField)
      .encode('y', yField)
      .axis('x', {
        title: null,
        tickStroke: '#fff', // 刻度线颜色
        labelFill: '#fff',
      })
      .axis('y', {
        title: null,
        tickStroke: '#fff', // 刻度线颜色
        labelFill: '#fff',
      })
      .tooltip({
        items: [{ name: '订单总数', channel: 'y' }],
      })
      .label({
        text: yField,
        position: 'inside',
        formatter: (v) => (v ? `${v}` : ''),
        transform: [{ type: 'overlapDodgeY' }],
        fill: '#fff',
        fontSize: 10,
      })
    chart.render()
  }

  return <G2BaseChart data={data} width={width} render={renderChart} />
}

export default BarChart
